<script setup lang="js">
import { ref, onMounted, reactive } from "vue";
import { getAllFactors, changeFactorValue } from "@/apis";
import { ElMessage } from "element-plus";

const data = ref({});
const values = ref({});

let Eng2Chinese = reactive({});

let loadingFlag = ref(true);

async function fetchData() {
  let factorList = await getAllFactors();
  data.value = factorList?.data?.data?.reduce((acc, { factor, value }) => {
    acc[factor] = value;
    return acc;
  }, {});
  values.value = { ...data.value };

  Eng2Chinese = factorList?.data?.data?.reduce(
    (acc, { factor_chinese, factor }) => {
      acc[factor] = factor_chinese;
      return acc;
    },
    {},
  );

  loadingFlag.value = false;
}

// function changeValue(key) {
//   console.log(Eng2Chinese[key], values.value[key]);

//   changeFactorValue(Eng2Chinese[key], values.value[key])
//     .then((res) => {
//       ElMessage.success("修改成功");
//     })
//     .catch((err) => {
//       console.log(err);
//       ElMessage.error("修改失败！请检查你的网络！");
//     });
// }

onMounted(fetchData);

const activeNames = ref(["1", "2"]);
const handleChange = (val) => {
  console.log(val);
};

const handleSubmit = () => {
  console.log(values.value);
  changeFactorValue(values.value)
    .then((res) => {
      ElMessage.success("修改成功");
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("修改失败！请检查你的网络！");
    });
};

const electrical_factor = [
  "North",
  "Northeast",
  "East",
  "Central",
  "Northwest",
  "South",
];

const calculate_const = ["COD", "TN"];
</script>

<template>
  <div v-loading="loadingFlag">
    <h3 align="center">碳排放因子修正</h3>
    <el-from :model="values">
      <div class="form-top">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="化学药剂排放因子(Kg CO2/Kg)" name="1">
            <template v-for="(value, key) in data" :key="key">
              <el-form-item
                v-if="
                  electrical_factor.indexOf(key) == -1 &&
                  calculate_const.indexOf(key) == -1
                "
                :label="Eng2Chinese[key]"
                :prop="key"
              >
                <el-input v-model="values[key]" placeholder="请输入数据" />
              </el-form-item>
            </template>
          </el-collapse-item>
          <el-collapse-item title="电力碳排放因子(Kg CO2/(Kwh))" name="2">
            <div>
              <template v-for="(value, key) in data" :key="key">
                <el-form-item
                  v-if="electrical_factor.indexOf(key) != -1"
                  :label="Eng2Chinese[key]"
                  :prop="key"
                >
                  <el-input v-model="values[key]" placeholder="请输入数据" />
                </el-form-item>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="form-bottom">
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </el-form-item>
      </div>
    </el-from>
  </div>
</template>

<style scoped>
.data-entry {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.el-form-item {
  display: inline-block;
  width: 120px; /* 你可以根据需要调整这个宽度 */
  text-align: left;
  margin-right: 10px;
}

.el-collapse {
  width: 100%;
  background-color: transparent !important;
}

:deep() .el-collapse,
.el-collapse-item__wrap {
  border: none;
  background-color: transparent !important;
}
:deep() .el-collapse-item__header {
  background-color: transparent !important;
  font-size: 1em;
  /* background-color: rgba(255,255,255,0.2) !important; */
  /* filter:blur(0.4px) */
  backdrop-filter: blur(20px);
}
:deep() .el-collapse-item__content {
  background-color: rgba(110, 159, 250, 0.2) !important;
  backdrop-filter: blur(200px);
}

.input-align {
  max-width: 300px;
  width: 200px;
}

.form-top {
  display: flex;
  justify-content: space-between;
}
.form-bottom {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}
</style>
